<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>社区主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="icon" th:href="@{/读书1.jpg}" type="image/jpg" >
    <link rel="stylesheet" href="../static/layui-v2.5.7/layui/css/layui.css" th:href="@{/layui-v2.5.7/layui/css/layui.css}">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="../static/layui-v2.5.7/layui/layui.js" th:src="@{/layui-v2.5.7/layui/layui.js}"></script>
</head>
<body>

<div class="head">
    <ul class="layui-nav">

        <li class="layui-nav-item layui-this">
            <a th:href="@{/index}">
                <i class="layui-icon layui-icon-home"></i>
                首页
            </a>
        </li>

        <li class="layui-nav-item ">
            <a th:href="@{/toSystemMessage}" id="systemMassage">
                <i class="layui-icon layui-icon-notice"></i>
                系统消息
            </a>
        </li>

        <li class="layui-nav-item">
            <a href="javascript:;">
                <i class="layui-icon layui-icon-read"></i>
                文章类型
            </a>
            <dl class="layui-nav-child">
                <!-- 二级菜单 -->
<!--                <dd><a th:href="@{/list/10/1}">Java</a></dd>-->
<!--                <dd><a th:href="@{/list/11/1}">C++</a></dd>-->
<!--                <dd><a th:href="@{/list/12/1}">Python</a></dd>-->
<!--                <dd><a th:href="@{/list/13/1}">JavaScript</a></dd>-->
<!--                <dd><a th:href="@{/list/14/1}">C语言</a></dd>-->
<!--                <dd><a th:href="@{/list/15/1}">云计算</a></dd>-->

                <dd><a href="#hot">热度排行</a></dd>
                <dd><a href="#Java">Java</a></dd>
                <dd><a href="#C++">C++</a></dd>
                <dd><a href="#Python">Python</a></dd>
                <dd><a href="#JavaScript">JavaScript</a></dd>
                <dd><a href="#C语言">C语言</a></dd>
                <dd><a href="#云计算">云计算</a></dd>
            </dl>
        </li>

        <li class="layui-nav-item">
            <a th:href="@{/post}">
                <i class="layui-icon layui-icon-chat"></i>
                论坛
            </a>
        </li>

        <div class="head_div1">
            <form action="/ImagineCommunity/blogSearchList" method="get">
                <input class="head_div1_input1" name="title" placeholder="&nbsp 输 入 你 想 看 的 文 章 话 题">
                <button class="head_div1_button"><i class="layui-icon layui-icon-search" style="font-size: 25px;"></i></button>
            </form>
        </div>

        <div class="head_div2">

            <li class="layui-nav-item">
                <a th:href="@{/friends}">
                    <i class="layui-icon layui-icon-friends"></i>
                    好友列表
                </a>
            </li>

            <li class="layui-nav-item" th:if="${session.user!=null}">
                <a><img th:src="${session.user.headImg}" class="layui-nav-img"><span th:text="${session.user.username}">2</span></a>
                <dl class="layui-nav-child">
                    <dd>
                        <a th:href="@{/personalInformation}">
                            <i class="layui-icon layui-icon-chat"></i>
                            个人信息
                        </a>
                    </dd>

                    <dd>
                        <a th:href="@{/blog}">
                            <i class="layui-icon layui-icon-edit"></i>
                            书写文章
                        </a>
                    </dd>

                    <dd>
                        <a th:href="@{/outLogin(id = ${session.user.id})}">
                            <i class="layui-icon layui-icon-logout"></i>
                            退了
                        </a>
                    </dd>

                </dl>
            </li>

            <li class="layui-nav-item" th:if="${session.user==null}">
                <a th:href="@{/login}">登录</a>
            </li>

            <span th:if="${session.user==null}">|</span>

            <li class="layui-nav-item" th:if="${session.user==null}">
                <a th:href="@{/register}">注册</a>
                </dl>
            </li>

        </div>
    </ul>

</div>

<div class="div_body">

    <div class="div_body_div1" id="hot">

        <div class="div_body_div1_divTotal">
            <a href="/ImagineCommunity/toHotBlogList">
                <span class="div_body_div1_divTotal_span"></span>
                热门话题
            </a>

        </div>

        <div class="div_body_div1_div1">
            <!--                <div class="div_body_div1_div1_div">-->
            <!--                    <div class="div_body_div1_div1_div_div1"><img th:src="@{/c站.png}" alt=""></div>-->
            <!--                    <div class="div_body_div1_div1_div_div2">学好数理化，走遍宇宙都不怕</div>-->
            <!--                    <div class="div_body_div1_div1_div_div3"><img src="读书1.jpg" alt=""><span>宇宙帝王弗利沙</span></div>-->
            <!--                </div>-->
        </div>

        <div class="layui-carousel" id="test3" lay-filter="test4">
            <div carousel-item="" class="bannerList">
                <!--                    <div class="layui-carousel_div"><img src="nova8pro.jpg" alt=""></div>-->
                <!--                    <div class="layui-carousel_div"><img src="nova8pro.jpg" alt=""></div>-->
                <!--                    <div class="layui-carousel_div"><img src="nova8pro.jpg" alt=""></div>-->
                <!--                    <div class="layui-carousel_div"><img src="nova8pro.jpg" alt=""></div>-->
                <!--                    <div class="layui-carousel_div"><img src="nova8pro.jpg" alt=""></div>-->
            </div>
        </div>
    </div>
    <!-- 2 -->
    <div  class="div_body_div2" id="Java">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/10/1}">
                <span class="div_body_div2_divTotal_span"></span>
                Java
            </a>
        </div>

        <div class="div_body_div2_div1">

            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img src="c站.png" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->

        </div>

    </div>
    <!-- 3 -->
    <div  class="div_body_div3" id="C++">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/11/1}">
                <span class="div_body_div2_divTotal_span"></span>
                C++
            </a>
        </div>

        <div class="div_body_div2_div1">

            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img th:src="@{/c站.png}" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->

        </div>

    </div>
    <!-- 4 -->
    <div  class="div_body_div4" id="Python">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/12/1}">
                <span class="div_body_div2_divTotal_span"></span>
                Python
            </a>
        </div>

        <div class="div_body_div2_div1">
            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img th:src="@{/c站.png}" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->
        </div>

    </div>
    <!-- 5 -->
    <div  class="div_body_div5" id="JavaScript">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/13/1}">
                <span class="div_body_div2_divTotal_span"></span>
                JavaScript
            </a>
        </div>

        <div class="div_body_div2_div1">
            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img th:src="@{/c站.png}" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->
        </div>

    </div>
    <!-- 6 -->
    <div  class="div_body_div6" id="C语言">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/14/1}">
                <span class="div_body_div2_divTotal_span"></span>
                C语言
            </a>
        </div>

        <div class="div_body_div2_div1">
            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img src="c站.png" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->
        </div>

    </div>
    <!-- 7 -->
    <div  class="div_body_div7" id="云计算">
        <div class="div_body_div2_divTotal">
            <a th:href="@{/list/15/1}">
                <span class="div_body_div2_divTotal_span"></span>
                云计算
            </a>
        </div>

        <div class="div_body_div2_div1">
            <!--                <div class="div_body_div2_div1_div">-->
            <!--                    <div class="div_body_div2_div1_div_div1"><img th:src="@{/c站.png}" alt=""></div>-->
            <!--                    <div class="div_body_div2_div1_div_div2">Java8编程实战</div>-->
            <!--                    <div class="div_body_div2_div1_div_div3"><img src="读书1.jpg" alt=""><span>星辰kk4</span></div>-->
            <!--                </div>-->
        </div>

    </div>
    <!--  -->
</div>

<div th:replace="foot::#foot"></div>

</body>

<style>

    body{
        background-color: rgb(246,246,246);
        min-width: 1450px;
        padding-top:60px;
    }

    .head{
         position: fixed;
         width:100%;
         top:0;
         z-index:1;
    }

  .head_div1{
        width:355px;
        height: 30px;
        display: inline-block;
        /*border: 1px solid red*/
        float: right;
        margin: 15px 15px 0px 0px;
        background-color:rgb(57,61,73);
    }

    .head_div1_input1{
        height: 30px;
        width: 300px;
        border-radius: 5px 5px 5px 5px;
        border: none;
        background-color:rgb(232, 232, 232);
        float: left;
    }

    .head_div1_button{
        height: 30px;
        width: 50px;
        border-radius: 5px 5px 5px 5px;
        background-color:rgb(57,61,73);
        border: 1px solid white;
        //font-family: '楷体';
        font-size: 15px;
        line-height: 30px;
        color: white;
        float: right;
    }

    .head_div2{
        float: right;
        display: inline-block;
        margin-right: 15px;
    }

    .head a {
        //color: black !important;
    }

    .div_body{
        background-color:white;
        /* 这个白边不能去 */
        border: 1px solid white;
        margin: 15px auto;
        width: 85%;
        height:3650px
    }

    .div_body_div1{
        /* border: 1px solid red; */
        margin: 15px auto;
        width: 97%;
        height:405px
    }

    .div_body_div1_divTotal_span{
        /* border: 1px solid red; */
        width: 31px;
        height: 31px;
        background-image: url(书页.png);
        float: left;
        display: inline-block;
        background-size: 100% 100%;
        vertical-align: middle;
        color:rgb(57,61,73) !important;
    }

    .div_body_div1_divTotal{
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        margin-bottom: 15px;
        /* border: 1px solid red; */
        width: 100%;
        height:32px;
    }

    .div_body_div1 > .layui-carousel{
        float:right;
    }

    .layui-carousel_div>img{
        width: 300px;
        height: 350px;
    }

    .div_body_div1_div1{
        display: inline-block;
        /* border: 1px solid red;  */
        float: left;
        width: 74%;
        height: 88%;
    }

    .div_body_div1_div1_div{
        display: inline-block;
        /* border: 1px solid red;  */
        float: left;
        width: 48%;
        height: 106px;
        margin-right: 15.5px;
        margin-bottom: 15px;
    }

    .div_body_div1_div1_div_div1{
        display: inline-block;
        /* border: 1px solid red;  */
        float: left;
        width: 25%;
        height: 100%;
    }

    .div_body_div1_div1_div_div1>img{
        width: 100%;
        height: 100%;
    }

    .div_body_div1_div1_div_div2{
        display: inline-block;
        /* border: 1px solid red;  */
        float: right;
        width: 70%;
        height: 50%;
        margin-bottom: 10px;
        overflow: hidden;
        font-size: 18px;
    }

    .div_body_div1_div1_div_div3{
        display: inline-block;
        /* border: 1px solid red;  */
        float: right;
        width: 70%;
        height: 30%;
        line-height: 35px;
    }

    .div_body_div1_div1_div_div3>img{
        display: inline-block;
        /* border: 1px solid red;  */
        float: left;
        width: 30px;
        height: 30px;
        border-radius: 15px;
    }

    .div_body_div1_div1_div_div3>span{
        font-size: 14px;
        color: #999999;
        margin-left: 10px;
    }
    /* 2 */
    .div_body_div2, .div_body_div3, .div_body_div4, .div_body_div5, .div_body_div6, .div_body_div7{
        /* border: 1px solid red; */
        margin: 15px auto;
        width: 100%;
        height:520px
    }

    .div_body_div2_divTotal_span{
        /* border: 1px solid red; */
        width: 31px;
        height: 31px;
        background-image: url(书页.png);
        float: left;
        display: inline-block;
        background-size: 100% 100%;
        vertical-align: middle;
    }


    .div_body_div2_divTotal{
        font-size: 20px;
        font-weight: 700;
        line-height: 32px;
        /* border: 1px solid red; */
        margin:auto;
        width: 97%;
        height:32px
    }

    .div_body_div2_div1{
        margin-top: 15px;
        /* border: 1px solid red; */
        float: left;
        width: 100%;
        height:470px
    }

    .div_body_div2_div1_div{
        border: 1px solid rgb(242,242,242);
        float: left;
        display: inline-block;
        margin-bottom: 20px;
        margin-left: 20px;
        width: 223px;
        height:223px;
    }

    .div_body_div2_div1_div_div1{
        /* border: 1px solid red;*/
        width: 100%;
        height:60%;
    }

    .div_body_div2_div1_div_div1>img{
        width: 100%;
        height:100%;
    }

    .div_body_div2_div1_div_div2{
        /* border: 1px solid red;*/
        margin: 5px auto 0px;
        width: 97%;
        height:20%;
        font-size: 15px;
        overflow: hidden;
    }

    .div_body_div2_div1_div_div3{
        /* border: 1px solid red;*/
        margin: 5px auto 0px;
        width: 97%;
        height:10%;
        line-height: 25px;
    }

    .div_body_div2_div1_div_div3>img{
        /* border: 1px solid red;*/
        float: left;
        width: 22px;
        height:22px;
        border-radius: 11px;
    }

    .div_body_div2_div1_div_div3>span{
        font-size: 14px;
        color: #999999;
        margin-left: 5px;
    }
    /* 2 */

    /*  */
<!--    .div_navigation{-->
<!--        width:95px;-->
<!--        height:535px;-->
<!--        background-color:white;-->
<!--        position: fixed;-->
<!--        top: 75px;-->
<!--        left:5px;-->
<!--        //border: 1px red solid;-->
<!--    }-->
<!--    .div_navigation>div{-->
<!--        width:100%;-->
<!--        height:50px;-->
<!--        //border: 1px red solid;-->
<!--        padding-left:5px;-->
<!--        line-height:50px;-->
<!--        //font-family:"楷体";-->
<!--        font-size:16px;-->
<!--    }-->

<!--    .div_navigation>div:hover{-->
<!--        background-color:rgb(246,246,246);-->
<!--    }-->

/* 4 */

    .div_foot {
        width: 100%;
        /* border: 1px red solid; */
        height: 100px;
        background-color: rgb(57,61,73);
    }

    a {
        text-decoration: none;
    }

    .div_foot_div1 {
        /* border: red 1px solid; */
        width: 990px;
        height: 85px;
        display: inline-block;
        position: relative;
        top: 10px;
        left: 240px;
        text-align: center;
        font-size: 12px;
        line-height: 150%;
        font-family: Arial, Verdana, 宋体;
        color: white;
    }

    .div_foot_div1 div {
        margin-top: 10px;
    }

    .div_foot_div1_div1 a {
        margin: 0 10px;
        color:white;
    }

</style>

<script th:inline="javascript">
    //JavaScript代码区域
    layui.use('element', function(){
      var element = layui.element;
    });

    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
                  , form = layui.form;
        //图片轮播设置大小
        carousel.render({
            elem: '#test3'
            , width: '300px'
            , height: '350px'
            , interval: 5000
        });
    });

    <!-- 热门blog -->
    $.ajax({
        url : '/ImagineCommunity/hotBlog',
        success: function (res) {
            //console.log(res.page);
            $.each(res.page.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div1_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div1_div1_div_div1'><img src='"+ blog.filePath +"'></div>" +
                "<div class='div_body_div1_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div1_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div1_div1").append(result);
            });
        }
    })

    <!-- 轮播图 -->
    $.ajax({
        url : '/ImagineCommunity/getBannerList',
        success: function (res) {
            console.log(res);
            $.each(res.bannerList, function(index, banner){
                //console.log(blog);
                var result=
                "<div class='layui-carousel_div'><img src='"+ banner.bannerImg +"'></div>";
                $(".bannerList").append(result);
            });
        }
    })

    <!-- Java -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/10',
        success: function (res) {
            //console.log(res.page);
            $.each(res.javaPage.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div2>.div_body_div2_div1").append(result);
            });
        }
    })

    <!-- C++ -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/11',
        success: function (res) {
            //console.log(res.page);
            $.each(res.cppPage.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div3>.div_body_div2_div1").append(result);
            });
        }
    })

    <!-- Python -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/12',
        success: function (res) {
            //console.log(res.page);
            $.each(res.pythonPage.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div4>.div_body_div2_div1").append(result);
            });
        }
    })

    <!-- JavaScript -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/13',
        success: function (res) {
            //console.log(res.page);
            $.each(res.javaScriptPage.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div5>.div_body_div2_div1").append(result);
            });
        }
    })

   <!-- C语言 -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/14',
        success: function (res) {
            //console.log(res.page);
            $.each(res.cPage.items, function(index, blog){
               //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div6>.div_body_div2_div1").append(result);
            });
        }
    })

    <!-- 云计算 -->
    $.ajax({
        url : '/ImagineCommunity/javaBlog/15',
        success: function (res) {
            //console.log(res.page);
            $.each(res.yPage.items, function(index, blog){
                //console.log(blog);
                var result=
                "<div class='div_body_div2_div1_div'>" +
                "<a href='/ImagineCommunity/blogDetails?id=" + blog.id + "'>" +
                "<div class='div_body_div2_div1_div_div1'><img src='" + blog.filePath + "'></div>" +
                "<div class='div_body_div2_div1_div_div2'>" + blog.title + "</div>" +
                "</a>" +
                "<div class='div_body_div2_div1_div_div3'><img src=' " + blog.headImg + " '><span>" + blog.userName + "</span></div>" +
                "</div>";
                $(".div_body_div7>.div_body_div2_div1").append(result);
            });
        }
    })

    <!-- 系统通知个数 -->
    var userId = [[${session.user?.id}]];

    if(userId != null){
        $.ajax({
            url : '/ImagineCommunity/getSystemMassageNum',
            data:{
                userId:userId,
            },
            success: function (res) {
                console.log(res.messageNum);
                if(res.messageNum>0){
                      $("#systemMassage").append("<span class='layui-badge'>" + res.messageNum + "</span>");
                }
            }
        })
    }

    <!-- 浏览器关闭事件,浏览器关闭时向后台发送退出链接,thymeleaf内联对象后加个'?',不然不存在时会报错-->
    $(window).unload(function(){
        $.ajax({
            url : "/ImagineCommunity/outLogin?id=[[${session.user?.id}]]",
        })
    });

</script>
</html>
